{% extends 'base.html' %}
{% load static %}

{% block title %}
    浏览历史
{% endblock %}

{% block css %}
	<style>
    .table-actions button {
      border: none;
      background: none;
      color: #fe5e74;
      cursor: pointer;
      font-size: 16px;
      margin-right: 8px;
    }

    .table-actions button:hover {
      color: #dc3545;
    }

    .table-avatar {
      width: 48px;
      height: 48px;
      border-radius: 8px;
      object-fit: cover;
    }
  </style>
{% endblock %}

{% block content %}
	<!-- section main content -->
    <section class="main-content">
      <div class="container-xl">
        <div class="row gy-4">
          <div class="col-lg-10 mx-auto">
            <!-- section header -->
            <div class="section-header">
              <h3 class="section-title">浏览历史</h3>
              <img src="{% static 'images/wave.svg' %}" class="wave" alt="wave" />
            </div>

            <div class="padding-30 rounded bordered bg-white">
              <div class="table-responsive">
                <table class="table align-middle text-center">
                  <thead class="table-light">
                    <tr>
                      <th>封面</th>
                      <th>标题</th>
                      <th>作者</th>
                      <th>浏览时间</th>
                      <th>操作</th>
                    </tr>
                  </thead>
                  <tbody id="historyTable">
                  {% for view in view_historys %}
                  <tr>
                      <td>
                          <a href="/life/detail/{{ view.article.id }}/">
                              <img src="{{ view.article.fm_image }}" class="table-avatar" alt="">
                          </a>
                      </td>
                      <td>
                          <a href="/life/detail/{{ view.article.id }}/">{{ view.article.title }}</a>
                      </td>
                      <td>{{ view.user.name }}</td>
                      <td>{{ view.create_time }}</td>
                      <td class="table-actions">
                        <button><i class="icon-trash"></i>
                            <a href="/user/del/action/{{ view.pk }}/">删除</a>
                        </button>
                      </td>
                  </tr>
                  {% endfor %}
                  </tbody>
                </table>
                <div id="noHistory" style="display:none;" class="text-center text-muted py-4">暂无浏览记录</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
{% endblock %}




{% block js %}
	<script>
    function removeHistory(btn) {
      var row = btn.closest('tr');
      row.parentNode.removeChild(row);
      if (document.querySelectorAll('#historyTable tr').length === 0) {
        document.getElementById('noHistory').style.display = 'block';
      }
    }
  </script>
{% endblock %}


